// 手势状态
const GestureState = {
  POSSIBLE: 0, // 手势未识别
  BEGIN: 1, // 手势已识别
  ACTIVE: 2, // 连续手势活跃状态
  END: 3, // 手势终止
  CANCELLED: 4 // 手势取消
}

const { shared, spring } = wx.worklet

Page({
  data: {},
  onLoad(options) {
    const x = shared(0)
    const y = shared(0)

    const scale = shared(1)
    const pressed = shared(false)

    this.applyAnimatedStyle('.circle', () => {
      'worklet'
      return {
        backgroundColor: pressed.value ? '#5f9ea0' : '#adff2f',
        transform: `translate(${x.value}px, ${y.value}px) scale(${scale.value})`
      }
    })

    this.x = x
    this.y = y
    this.scale = scale
    this.pressed = pressed
  },
  handlePan(evt) {
    'worklet'
    console.log('111', JSON.stringify(evt))
    if (evt.state === GestureState.POSSIBLE) {
      this.pressed.value = true
      this.scale.value = spring(1.2)
    } else if (evt.state === GestureState.END || evt.state === GestureState.CANCELLED) {
      this.pressed.value = false
      this.scale.value = spring(1)
      this.x.value = spring(0)
      this.y.value = spring(0)
    } else if (evt.state === GestureState.ACTIVE) {
      this.x.value += evt.deltaX
      this.y.value += evt.deltaY
    }
  }
})
